<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix AlertDialog</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/AlertDialog.js"></script>
    <script type="module" src="../define/BorderButton.js"></script>
  </head>

  <body role="main">
    <div class="demo padded">
      <style>
        #response {
          margin-bottom: 0;
        }
        #response:empty {
          display: none;
        }
      </style>

      <elix-border-button id="okCancelButton" onclick="okCancelClick()">
        Open OK/Cancel alert
      </elix-border-button>
      <elix-border-button id="yesNoCancelButton" onclick="yesNoCancelClick()">
        Open Yes/No/Cancel alert
      </elix-border-button>

      <p id="response"></p>

      <script>
        function okCancelClick(event) {
          showAlertWithChoices(["OK", "Cancel"]);
        }

        function yesNoCancelClick(event) {
          showAlertWithChoices(["Yes", "No", "Cancel"]);
        }

        async function showAlertWithChoices(choices) {
          const dialog = document.createElement("elix-alert-dialog");
          dialog.textContent = "Hello, world";
          dialog.choices = choices;
          dialog.addEventListener("close", (event) => {
            const closeResult = event.detail.closeResult;
            const choice = closeResult && closeResult.choice;
            response.textContent = choice
              ? "You picked " + choice + "."
              : "You didn't make a choice.";
          });
          await dialog.open();
        }
      </script>
    </div>
  </body>
</html>
